<template>
  <div>
    <div><h1 style="color: #0a0a80"></h1></div>
    <span>
      <div id="c1"></div>
      <div>
        <el-form :inline="true" :model="formInline" class="demo-form-inline">
          <el-form-item label="姓名">
            <el-input v-model="user.name" placeholder="姓名"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="onSubmit2(),Graph()"  @keyup.enter="submitLogin"
            >查看</el-button>
          </el-form-item>
        </el-form>
      </div>
      <div style="margin-left: 50px">
        <h1 style="color: #36788c">
          第一学期进度---------------------------------->第二学期进度---------------------------------->第三学期进度---------------------------------->第四学期进度
        </h1>
      </div>
      <el-progress
              type="circle"
              :percentage="this.p1"
              :color="color1"
              style="margin-left: 50px"
      ></el-progress>
      <el-progress
              type="circle"
              :percentage="this.p2"
              :color="color2"
              style="margin-left: 200px"
      ></el-progress>
      <el-progress
              type="circle"
              :percentage="this.p3"
              :color="color3"
              style="margin-left: 200px"
      ></el-progress>
      <el-progress
              type="circle"
              :percentage="this.p4"
              :color="color4"
              style="margin-left: 200px"
      ></el-progress>
      <!--      <div id="container"></div>-->
      <!--      <div id="container1"></div>-->
      <div id="test" style="width: 100%; height: 600px"></div>
      <div>
        <center>
        <el-card  class="box-card" style="color:#67C23A">
                <div slot="header" class="clearfix" >
                <span>BMI建议</span>
                </div>
              <div style="white-space:pre-line">{{ msg }}</div>
                </el-card>
      </center>
      </div>
    </span>
  </div>



</template>

<script>
  import { Liquid } from "@antv/g2plot";
  import * as echarts from "echarts";
  export default {
    name: "BMI",
    data() {
      return {
        user: JSON.parse(window.sessionStorage.getItem("user")),
        formInline: {
          name: '',
        },
        student: [],
        p1: 0,
        p2: 0,
        p3: 0,
        p4: 0,
        color1: "#1989fa",
        color2: "#1989fa",
        color3: "#1989fa",
        color4: "#1989fa",
        msg:'',

      };
    },
    mounted() {this.Graph()},

    methods: {
      onSubmit2() {
            this.student=this.user;
            const val = (this.user.weight / ((this.user.height*0.01)*(this.user.height*0.01)));
            if (val >= 28) {
              this.msg = '你好' +this.user.name+'。我是健康小卫士！你的BMI指数为肥胖！\n' +
                      'Tip1:保持运动习惯，保证每天都要运动，而且保证运动时间要在30分钟。\n' +
                      'Tip2：多喝水，饭前喝一杯水，保证自己有饱腹感，进餐时食量自然会减少。\n' +
                      'Tip3: 三餐分量递减，早餐多吃有营养的，午餐吃八分饱，晚餐多吃清单的。';

            } else if (val >= 24) {
              this.msg = '你好' +this.user.name+'。我是健康小卫士！你的BMI指数为过重！\n' +
                      'Tip1:保持运动习惯，保证每天都要运动，而且保证运动时间要在30分钟。\n' +
                      'Tip2：多喝水，饭前喝一杯水，保证自己有饱腹感，进餐时食量自然会减少。\n' +
                      'Tip3: 三餐分量递减，早餐多吃有营养的，午餐吃八分饱，晚餐多吃清单的。';

            } else if (val >= 20) {
              this.msg = '你好' +this.user.name+'。我是健康小卫士！你的BMI指数为正常。\n' +
                      'Tip1：虽然您的BMI指数正常，但是一定不要暴饮暴食，要均衡节食。\n' +
                      'Tip2：多进行体育锻炼，丰富一下运动方式，游泳，跑步，弹跳，瑜伽都是不错的选择。\n' +
                      'Tip3：不要熬夜，熬夜最容易使身体机能受损，保持良好的作息。';

            } else if (val >= 16) {
              this.msg = '你好' +this.user.name+'。我是健康小卫士！你的BMI指数为过轻！\n' +
                      'Tip1：从营养上下功夫，可以考虑吃高热量的食物来增加体重\n' +
                      'TIp2：保持良好的作息习惯，不要熬夜，一定要按时睡觉\n' +
                      'Tip3：吃一些补品，均衡节食，适当运动，增加身体的吸收功能。';

            }

            this.p1 = (this.user.mileageTerm1 / 120).toFixed(2) * 100;
            if (this.p1 < 50) this.color1 = "#e6a23c";
            else if (this.p1 > 90) this.color1 = "#5cb87a";
            this.p2 = (this.user.mileageTerm2 / 120).toFixed(2) * 100;
            if (this.p2 < 50) this.color2 = "#e6a23c";
            else if (this.p2 > 90) this.color2 = "#5cb87a";
            this.p3 = (this.user.mileageTerm3 / 120).toFixed(2) * 100;
            if (this.p3 < 50) this.color3 = "#e6a23c";
            else if (this.p3 > 90) this.color3 = "#5cb87a";
            this.p4 = (this.user.mileageTerm4 / 120).toFixed(2) * 100;
            if (this.p4 < 50) this.color4 = "#e6a23c";
            else if (this.p4 > 90) this.color4 = "#5cb87a";
            const gauge = new Liquid("container", {
              percent: (this.user.mileageTerm4 / 120).toFixed(4),
              shape: "diamond",
              outline: {
                border: 4,
                distance: 8,
              },
              wave: {
                length: 128,
              },
            });

            gauge.render();


      },
      Graph() {


          const chartDom = document.getElementById("test");
          const myChart = echarts.init(chartDom);
          const option = {
            series: [
              {
                type: "gauge",
                startAngle: 180,
                endAngle: 0,
                min: 12,
                max: 32,
                splitNumber:10,
                axisLine: {
                  lineStyle: {
                    width: 6,
                    color: [
                      [0.25, "#7CFFB2"],
                      [0.5, "#58D9F9"],
                      [0.75, "#FDDD60"],
                      [1, "#FF6E76"],
                    ],
                  },
                },
                pointer: {
                  icon: "path://M12.8,0.7l12,40.1H0.7L12.8,0.7z",
                  length: "12%",
                  width: 20,
                  offsetCenter: [0, "-60%"],
                  itemStyle: {
                    color: "auto",
                  },
                },
                axisTick: {
                  length: 12,
                  lineStyle: {
                    color: "auto",
                    width: 2,
                  },
                },
                splitLine: {
                  length: 20,
                  lineStyle: {
                    color: "auto",
                    width: 5,
                  },
                },
                axisLabel: {
                  color: "#464646",
                  fontSize: 20,
                  distance: -70,
                  formatter: function(value) {
                    if (value === 28) {
                      return "肥胖";
                    } else if (value === 24) {
                      return "过重";
                    } else if (value === 20) {
                      return "正常";
                    } else if (value === 16) {
                      return "过轻";
                    }
                  },
                },
                title: {
                  offsetCenter: [0, "-20%"],
                  fontSize: 30,
                },
                detail: {
                  fontSize: 50,
                  offsetCenter: [0, "0%"],
                  valueAnimation: true,
                  formatter: function(value) {
                    return Math.round(value);
                  },
                  color: "auto",
                },
                data: [
                  {
                    value: (this.user.weight / ((this.user.height*0.01)*(this.user.height*0.01))),
                    name: "BMI",
                  },
                ],
              },
            ],
          };
          myChart.setOption(option);

      },
    },
  };
</script>

<style scoped>
  .text {
    font-size: 14px;
  }

  .item {
    padding: 18px 0;
  }

  .box-card {
    width: 480px;
  }
</style>
